<template>
  <div class="login_background">

    <div class="fx_center_all" style="height: 44px;width: 100%">
      <img src="@/common/assets/png/layout_left_top_logo.png" alt="" class="login_logo">
      <span class="login_title">ABL Admin Pro</span>
    </div>

    <div class="fx_center_all"
         style="margin-top: 16px;margin-bottom: 32px;color: #00000072;height: 25px">
      <span style="font-size: 12px">亿联管理系统，抽离核心业务，加速二次开发。</span>
      <span style="font-size: 11px">（那能叫抄吗？那是借鉴！）</span>
    </div>

    <a-tabs v-model:activeKey="option.activeKey">

      <!--      账号密码登录-->
      <a-tab-pane key="1" tab="账号密码登录">
        <div class="fx_center_all">
          <a-form :model="defForm.data" style="width: 360px">

            <a-form-item name="account"
                         :rules="[{ required: true, message: '请输入账号!' ,trigger:'blur'}]">
              <a-input v-model:value="defForm.data.account" placeholder="请输入账号">
                <template #prefix>
                  <UserOutlined style="color:#1890FF"/>
                </template>
              </a-input>
            </a-form-item>

            <a-form-item name="password"
                         :rules="[{ required: true, message: '请输入密码!' ,trigger:'blur' }]">
              <a-input-password v-model:value="defForm.data.password" placeholder="请输入密码" @keyup.enter.native="login">
                <template #prefix>
                  <LockOutlined style="color:#1890FF"/>
                </template>
              </a-input-password>
            </a-form-item>

            <div class="fx_row" style="margin-bottom: 24px">
              <a-checkbox v-model:checked="defForm.data.remember">自动登录</a-checkbox>
              <div class="fx_110"></div>
              <a class="login-form-forgot" href="">忘记密码</a>
            </div>

            <a-button
                style="width: 100%;height: 40px;border-radius: 0px !important;"
                type="primary"
                @click.stop="login">
              登录
            </a-button>

            <!--            其他方式登录-->
            <div class="fx_center_all" style="margin-top: 24px">
              其他方式登录
              <wechat-outlined class="pointer hover_blue other_login"/>

              <alipay-circle-outlined class="pointer hover_blue other_login"/>

              <div class="fx_110"></div>

              <a class="login-form-forgot" href="">注册账户</a>

            </div>

          </a-form>
        </div>
      </a-tab-pane>

      <!--      手机号登录-->
      <a-tab-pane key="2" tab="手机号登录">
        <div class="fx_center_all">
          <a-form :model="defForm.data" style="width: 360px">

            <a-form-item name="phoneNumber"
                         :rules="[{ required: true, message: '请输入手机号!' ,trigger:'blur'}]">
              <a-input v-model:value="defForm.data.phoneNumber" style="font-size: 15px" maxlength="11"
                       placeholder="请输入手机号">
                <template #prefix>
                  <mobile-outlined style="color:#1890FF"/>
                </template>
              </a-input>
            </a-form-item>

            <a-form-item name="code"
                         :rules="[{ required: true, message: '请输入验证码!' ,trigger:'blur'}]">
              <div class="fx_row">
                <a-input v-model:value="defForm.data.code" placeholder="请输入验证码" maxlength="6">
                  <template #prefix>
                    <mail-outlined style="color:#1890FF"/>
                  </template>
                </a-input>
                <a-button
                    :disabled="option.sendPhoneCode"
                    style="border-radius: 0 !important;margin-left: 16px;width: 120px;height: 36px"
                    @click.stop="validateCode">
                  {{ option.validateCodeText }}
                </a-button>
              </div>
            </a-form-item>

            <div class="fx_row" style="margin-bottom: 24px">
              <a-checkbox v-model:checked="defForm.data.remember">自动登录</a-checkbox>
              <div class="fx_110"></div>
              <a class="login-form-forgot" href="">忘记密码</a>
            </div>

            <a-button
                style="width: 100%;height: 40px;border-radius: 0 !important;"
                type="primary"
                @click.stop="phoneLogin">
              登录
            </a-button>

            <!--            其他方式登录-->
            <div class="fx_center_all" style="margin-top: 24px">
              其他方式登录
              <wechat-outlined class="pointer hover_blue other_login"/>

              <alipay-circle-outlined class="pointer hover_blue other_login"/>

              <div class="fx_110"></div>

              <a class="login-form-forgot" href="">注册账户</a>

            </div>

          </a-form>
        </div>
      </a-tab-pane>

    </a-tabs>

    <div class="fx_col fx_center_all"
         style="position: fixed;bottom: 0px;margin-bottom: 20px;width: 100%;font-size:14px;color: #00000072;">
      <div style="margin-bottom: 5px">
        <span>帮助</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>隐私</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <span>条款</span>
      </div>
      <div>ABL Admin Pro © 2022 Copy Ant Design Vue</div>
    </div>
  </div>

</template>

<script lang="ts">
import {refreshMenu, refreshUserInfo, systemLogin} from "@/common/api/common";
import {pushAddParam} from "@/common/router/router";
import {validate} from "@/common/util/validate";

export default {
  name: 'Login',
  mounted() {
    //全局监听-刷新当前页面
    this.$event.$on('refresh', (data) => {
      if (this.$route.path == data['path']) {
        this.resetForm('defSearch');
        this.queryPage()
      }
    })
  },
  data() {
    return {
      //默认表单
      defForm: {
        data: {
          account: '',
          password: '',
          remember: false,
          phoneNumber: '',
          code: '',
          type: '0',
        },
      },
      option: {
        loading: false,
        verify: false,
        sendPhoneCode: false,
        activeKey: '1',
        countdownTime: 10,
        validateCodeText: '发送验证码',
        timer: undefined,
      }
    };
  },
  methods: {
    startTimer() {
      this.option.timer = setInterval(() => {
        this.option.countdownTime -= 1;
        this.option.validateCodeText = this.option.countdownTime + ' s'
        if (this.option.countdownTime <= 0) {
          clearInterval(this.option.timer);
          this.option.countdownTime = 60;
          this.option.sendPhoneCode = false;
          this.option.validateCodeText = '发送验证码'
        }
      }, 1000)
    },
    validateCode() {
      if (!validate.isPhone(this.defForm.data.phoneNumber)) {
        this.$message.warning("手机号输入错误")
        return;
      }
      this.$message.success("验证码已发送，请注意查收。")
      this.option.sendPhoneCode = true;
      this.option.validateCodeText = this.option.countdownTime + ' s'
      this.startTimer()
    },
    phoneLogin() {
      this.$message.warning("此功能暂未开启")
    },
    login() {
      if (!this.defForm.data.account) {
        this.$message.warning("请输入账号")
        return;
      }
      if (!this.defForm.data.password) {
        this.$message.warning("请输入密码")
        return;
      }

      //登录
      systemLogin(this.defForm.data.account, this.defForm.data.password)
          .then(async (loginStatus) => {
            if (loginStatus) {
              //刷新查用户信息
              await refreshUserInfo()

              //刷新菜单信息
              await refreshMenu();

              let query = this.$route.query;
              if (query && query.redirect) {
                pushAddParam(query.redirect)
              } else {
                pushAddParam("/index")
              }
              //console.log("【loginStatus】", loginStatus)
            }
          })
    },
  }
}
</script>

<style scoped lang="less">

:deep(.ant-input-affix-wrapper) {
  border-radius: 0 !important;
}

:deep(.ant-input) {
  height: 25px !important;
  font-size: 15px !important;
}

:deep(.ant-tabs-nav) {
  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  flex-wrap: wrap !important;
  flex-direction: column-reverse !important;
}

:deep(.ant-tabs-nav:before) {
  border-bottom: transparent !important;
}

.login_background {
  width: 100%;
  min-height: 100%;
  padding: 110px 0 144px;
  background-image: url(@/common/assets/svg/login_background.svg);
  background-position: center 110px;
  background-size: 100%;
}

.login_logo {
  width: 44px;
  height: 44px;
}

.login_title {
  margin-left: 10px;
  font-size: 33px;
  font-weight: 700;
  color: #000000;
}

.other_login {
  font-size: 22px;
  border-radius: 100px;
  padding: 5px;
  color: #b0afaf
}
</style>
